
<script setup lang="ts">
  import { computed, onMounted } from "vue";
  import { isMobile } from "@/utils/index";
  import { storeToRefs } from 'pinia'
  import useDemoStore from '@/store/common.ts'
  // import {initLoginBg} from "./utils/index.ts"

  const demoStore = useDemoStore()
  const { isScreen } = storeToRefs(demoStore)

  // 计算属性，获取 counter 值
  const useIsScreen = computed(() => isScreen.value);
  // 加载完这个组件之后，加载背景
  // onMounted(()=>{
  //   initLoginBg();
  //   window.onresize = function(){initLoginBg()};
  // });
</script>

<template>
  <!-- <div :class="useIsScreen ? 'app' : 'app-mobile'" :style="{backgroundSize: isMobile() ? '100% 100vh' : '100% auto', backgroundRepeat: isMobile() ? 'no-repeat' : 'round'}"> -->
    <!-- <dv-full-screen-container> -->
    <!-- 存放背景 -->
    <!-- <canvas id="canvas" style="width: 100%;height: 100%;position: fixed;left: 0;top: 0;"></canvas> -->
    <router-view></router-view>
  <!-- </dv-full-screen-container> -->
  <!-- </div> -->
</template>

<style scoped>
  .app, .app-mobile {
    width: 100%;
    height: 100%;
    background: url(/src/assets/bg.jpg);
    background-repeat: round;
    background-size: 100% auto;
    @media screen and (orientation: landscape) {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
    }
  }
  .app-mobile {
    @media screen and (orientation: portrait) {
      position: absolute;
      width: 100vh;
      height: 100vw;
      top: 0;
      left: 100vw;
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      transform-origin: 0% 0%;
    }
  }
</style>
